import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { TouchableOpacity, FlatList, Image, View, Text } from 'react-native'
import { Rating } from 'react-native-elements'
import styles from './Styles/ServerListStyle'

export default class ServerList extends Component {
  // Prop type warnings
  static propTypes = {
    data: PropTypes.array,
    navigation: PropTypes.object,
    style: PropTypes.object,
  }

  // Defaults for props
  static defaultProps = {
    data: null,
    style: null,
  }

  _renderItem = ({item}) => (
    <TouchableOpacity
      onPress={()=>this.props.navigation.navigate('ServerDetailScreen', {id:item.id})}
      style={styles.item}>
      <Image
        style={styles.avatar}
        source={{uri:item.head_img}} />
      <View style={styles.main}>
        <View style={styles.header}>
          <View style={styles.headerLeft}>
            <Text style={styles.title}>{item.nickname}</Text>
            <Rating readonly imageSize={14}
              color='#fdcb6e'
              type='star'
              startingValue={parseInt(item.star)}
              style={styles.star}
            />
          </View>
          <Text style={styles.distance}>
            据您{item.distance}km</Text>
        </View>
        <View style={{flexDirection:'row',fontSize:14}}>
          <Text style={{fontSize:14,color:'#636e72'}}>工号:{item.job_no}</Text>
          <Text style={{fontSize:14,color:'#636e72'}}>[{item.class}]</Text>
        </View>
        <Text style={styles.desc}>{item.desc}</Text>
      </View>
    </TouchableOpacity>
  )

  render () {
    if (!this.props.data) {
      return null
    }
    return (
      <FlatList
        style={this.props.style}
        data={this.props.data}
        renderItem={this._renderItem}
        keyExtractor={(item,index) => index}
      />
    )
  }
}
